<template>
	<div class="wrap-center">
		<!-- 个人中心头部 -->
		<div class="img-bg">
			<img src="@/assets/img/default.png" alt="" />
			<div class="demo-basic--circle">
				<img id="img" :src="getImgUrl" class="avatar" />
			</div>
		</div>

		<!-- 个人中心信息展示 -->
		<div class="show-info">
			<!-- 个人基本信息展示区域 -->
			<div class="info">
				<ul class="list">
					<li>
						<div class="stuname">{{ stu.stuName }}</div>
						<div>性别：{{ stu.sex == 2 ? '女' : '男' }}</div>
					</li>
					<li>
						<div>年龄：{{ stu.age }}</div>
						<div>学号：{{ stu.stuId }}</div>
						<div>学院：{{ stu.college }}</div>
						<div>专业：{{ stu.profession }}</div>
					</li>
					<li>
						<div>电话：{{ stu.phone }}</div>
						<div>邮箱：{{ stu.email }}</div>
						<div>创建时间：{{ createTime }}</div>
						<div>最近一次访问时间：{{ updateTime }}</div>
					</li>
				</ul>
			</div>

			<el-space :size="20" :wrap="false">
				<el-button type="primary" @click="drawer = !drawer">修改个人信息</el-button>
				<el-button type="primary" @click="showLeaveDialog = true">申请离校</el-button>
				<el-button type="primary" @click="showStayDialog = true">申请留校</el-button>
			</el-space>
			<!-- 个人信息修改区域 -->
			<el-drawer v-model="drawer" :title="`修改个人信息`" :with-header="false">
				<h2 class="title">修改个人信息</h2>
				<el-form style="width: 300px" :label-width="100">
					<el-form-item label="姓名">
						<el-input v-model.trim="stuModInfo.stuName" />
					</el-form-item>
					<el-form-item label="年龄">
						<el-input v-model.number="stuModInfo.age" />
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model.trim="stuModInfo.phone" />
					</el-form-item>
					<el-form-item label="邮箱">
						<el-input v-model.trim="stuModInfo.email" />
					</el-form-item>
					<el-form-item label="学院">
						<el-input v-model.trim="stuModInfo.college" />
					</el-form-item>
					<el-form-item label="专业">
						<el-input v-model.trim="stuModInfo.profession" />
					</el-form-item>
					<el-form-item label="修改密码">
						<el-input v-model.trim="stuModInfo.password" type="password" />
					</el-form-item>
				</el-form>
				<template #footer>
					<el-button @click="submitModInfo" type="primary">提交</el-button>
				</template>
			</el-drawer>
		</div>

		<!-- 申请离校 -->
		<el-dialog v-model="showLeaveDialog" width="500">
			<template #header>
				<p class="title">离校申请缘由：</p>
			</template>
			<el-form label-position="top">
				<el-input
					type="textarea"
					v-model="holReason"
					resize="none"
					class="textarea"
					:autosize="{ minRows: 2, maxRows: 6 }"
					:maxlength="200" />
			</el-form>

			<template #footer>
				<el-button type="primary" plain @click="submitLeaveApply">提交离校申请</el-button>
			</template>
		</el-dialog>

		<!-- 申请留校 -->
		<el-dialog v-model="showStayDialog" width="500">
			<template #header>
				<p class="title">申请留校:</p>
			</template>
			<el-form label-position="top">
				<el-input
					type="textarea"
					v-model="holReason"
					resize="none"
					class="textarea"
					:autosize="{ minRows: 2, maxRows: 6 }"
					:maxlength="200" />
			</el-form>

			<template #footer>
				<el-button type="primary" plain @click="submitStayApply">提留校校申请</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { useUserStore } from '@/stores/userStore'
import { computed, nextTick, reactive, ref ,getCurrentInstance} from 'vue'
import { changeStuInfo, getUserInfo, ApplyLeaveSchool, ApplyStaySchool } from '@/utils/axios/stuReqest'
import useRegStore from '@/stores/useReg'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const { phoneIsOk, handleCheckEmail } = useRegStore()

const { proxy } = getCurrentInstance()
const holReason = ref()
// 获取pinia仓库中的用户信息
const stu = userStore.userInfo

// 显示申请对话框
const showLeaveDialog = ref(false)
const showStayDialog = ref(false)

const stuModInfo = reactive({
	password: '',
	age: stu.age ?? 18,
	sex: stu.sex,
	phone: stu.phone ?? "",
	email: stu.email ?? '',
	college: stu.college ?? '',
	profession: stu.profession ?? '',
	stuName: stu.stuName,
})

// 表单验证规则
// 控制- 个人信息修改区域的显示或隐藏
const drawer = ref(false)

let falg = ref(0)
const imageUrl = ref('https://img1.baidu.com/it/u=731000468,217848770&fm=253&fmt=auto&app=120&f=PNG?w=499&h=261')
const getImgUrl = computed(() => {
	if (falg != -1) falg++
	return stu.img ? 'http://8.130.68.204:9090' + stu.img : imageUrl.value
})

// 转换时间格式
const createTime = computed(() => new Date(stu.createTime).toLocaleDateString())
const updateTime = computed(() => new Date(stu.updateTime).toLocaleDateString())

// 处理离校申请
const submitLeaveApply = () => {
	ApplyLeaveSchool({ holReason: holReason.value }).then(() => {
		holReason.value = ''
	})
	showLeaveDialog.value = false
}
// 处理留校申请
const submitStayApply = () => {
	ApplyStaySchool({ holReason: holReason.value }).then(() => {
		holReason.value = ''
	})
	showStayDialog.value = false
}

const checkStuModInfo = () => {
	if (stuModInfo.stuName.length > 20) {
		ElMessage.warning({ message: '名字过长', duration: 1000 })
		return false
	}
	if (!Number.isInteger(stuModInfo.age) || stuModInfo.age > 110 || stuModInfo.age < 0) {
		ElMessage.warning({ message: '年龄不符合', duration: 1000 })
		return false
	}
	if (stuModInfo?.password?.length > 20) {
		ElMessage.warning({ message: '密码过长', duration: 1000 })
		return false
	}
	if (!phoneIsOk(stuModInfo.phone)) {
		ElMessage.warning({ message: '手机号不符合', duration: 1000 })
		return false
	}
	if (!handleCheckEmail(stuModInfo.email)) {
		ElMessage.warning({ message: '邮箱格式不规范', duration: 1000 })
		return false
	}
	if (stuModInfo.college?.length > 30) {
		ElMessage.warning({ message: '学院名过长', duration: 1000 })
		return false
	}
	if (stuModInfo.profession?.length > 30) {
		ElMessage.warning({ message: '专业名过长', duration: 1000 })
		return false
	}
	return true
}

// 处理提交完善信息
const submitModInfo = async () => {
	if (!stuModInfo.password) delete stuModInfo.password
	if (!checkStuModInfo()) return
	if (stuModInfo.password) {
		stuModInfo.password = await proxy.$md5(stuModInfo.password)
	}
	await changeStuInfo(stuModInfo)
	let { data } = await getUserInfo('/stu/getStuInfo')
	userStore.userInfo = data
	drawer.value = false
}

// 处理上传图片成功的钩子
const handleAvatarSuccess = async (response, uploadFile) => {
	imageUrl.value = URL.createObjectURL(uploadFile.raw)
	let { data } = await getUserInfo('/stu/getStuInfo')
	userStore.userInfo = data
	falg.value++
	await nextTick()
}


</script>

<style scoped lang="scss">
.textarea {
	box-shadow: 0 0 5px 1px #79bbff;
	// border-radius: 10px;
}
#img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}
.title {
	font-size: 20px;
	color: #79bbff;
}

// .el-form {
// 	margin: 200px auto 0;
// }
.wrap-center {
	border-radius: 10px;
}

.img-bg {
	position: relative;
	border-radius: 10px;
	img {
		// height: 200px
		width: 100%;
		border-radius: 10px 10px 0 0;
	}
}

//头像设置
.demo-basic--circle {
	position: absolute;
	bottom: -40px;
	left: 60px;
	border-radius: 50%;
	border: 5px solid #ffff;
	background-color: #fff;
}

.el-icon {
	position: absolute;
	bottom: 13px;
	right: 3px;
	color: #ffff;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgb(135, 206, 235);
}

//个人信息展示
.stuname {
	font-weight: 600;
	font-size: 20px;
}

.show-info {
	// border: 1px solid black
	min-height: 200px;
	margin: 100px 60px;
	padding: 5px;
}

.info {
	width: 100%;
	min-height: 100px;
}

.el-button {
	margin: 5px 0;
	padding: 5px;
}

.list {
	width: 100%;

	li {
		padding: 5px;
		// width: 60%
		display: flex;
		justify-content: space-between;
		div {
			min-width: 250px;
			padding: 5px;
			cursor: pointer;
			&:hover {
				border-radius: 10px;
				box-shadow: 0 0 2px #ccc;
			}
		}
	}
}
</style>
